<template>
  <!-- 搜索结果 -->
  <view class="search-result-page">
    <u-navbar height="55">
      <view style="position: relative; width: 100%; padding: 20rpx">
        <q-search-bar
          ref="search"
          @change="onSearchChange"
          @focus="onFocus"
          @blur="onBlur"
          @search="onClickSearch"
        />

        <!-- 搜索建议 -->
        <view class="search-suggest-box" v-show="showSuggest && searchWord">
          <view @tap.stop="onClickSearch(searchWord)" style="color: #007aff" v-if="searchWord">
            搜索“{{ searchWord }}"
          </view>

          <u-cell-item
            v-for="item in suggestList"
            icon="search"
            :arrow="false"
            @click="onClickSearch(item.keyword)"
            :title="item.keyword"
          ></u-cell-item>
        </view>
      </view>
    </u-navbar>

    <!-- tabs切换选项卡 -->
    <view class="tabs-wrapper">
      <u-tabs-swiper
        ref="uTabs"
        :list="typeList"
        :current="currentTab"
        @change="tabsChange"
        :is-scroll="false"
        active-color="#e51419"
        swiperWidth="750"
      >
      </u-tabs-swiper>
    </view>

    <swiper
      class="m-swiper"
      :current="swiperCurrent"
      @transition="transition"
      @animationfinish="animationfinish"
    >
      <!-- 综合搜索结果 -->
      <swiper-item class="swiper-item">
        <scroll-view scroll-y style="width: 100%; height: 100%" @scrolltolower="onreachBottom">
          <searchTypeCom ref="searchCom" style="margin-bottom: 100rpx" />
        </scroll-view>
      </swiper-item>

      <!-- 单曲 搜索结果 -->
      <swiper-item class="swiper-item">
        <scroll-view scroll-y style="width: 100%; height: 100%" @scrolltolower="onreachBottom">
          <searchTypeSong ref="searchSong" style="margin-bottom: 100rpx" />
        </scroll-view>
      </swiper-item>

      <!-- 歌单 搜索结果 -->
      <swiper-item class="swiper-item">
        <scroll-view scroll-y style="width: 100%; height: 100%" @scrolltolower="onreachBottom">
          <searchTypePlayList ref="searchPayList" style="margin-bottom: 100rpx" />
        </scroll-view>
      </swiper-item>

      <!-- 视频 搜索结果 -->
      <swiper-item class="swiper-item">
        <scroll-view scroll-y style="width: 100%; height: 100%" @scrolltolower="onreachBottom">
          <searchTypeVedio ref="searchVideo" style="margin-bottom: 100rpx" />
        </scroll-view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
  import searchTypeCom from '@/components/search/searchTypeCom.vue'
  import searchTypeSong from '@/components/search/searchTypeSong.vue'
  import searchTypePlayList from '@/components/search/searchTypePlayList.vue'
  import searchTypeVedio from '@/components/search/searchTypeVedio.vue'

  export default {
    components: {
      searchTypeCom,
      searchTypeSong,
      searchTypePlayList,
      searchTypeVedio,
    },
    data() {
      return {
        typeList: [
          {
            type: 1018,
            name: '综合',
          },
          {
            type: 1,
            name: '单曲',
          },
          {
            type: 1002,
            name: '歌单',
          },
          {
            type: 1014,
            name: '视频',
          },
        ],

        currentTab: 0,
        swiperCurrent: 0,
        //搜索建议
        suggestList: [],
        //显示搜索建议
        showSuggest: false,
        //输入框搜索值
        searchWord: '',
      }
    },
    computed: {},
    onLoad(option) {
      console.log('refs', this.$refs)
      let word = decodeURIComponent(option.word)
      this.searchWord = word
    },
    onReady() {
      this.toSearch(this.searchWord, this.swiperCurrent)
    },
    created() {
      //获取默认搜索关键词
      this.$api.searchDefault().then((data) => {
        this.defaultSearchWord = data.data.showKeyword
      })
    },
    mounted() {
      this.$refs.search.setWord(this.searchWord)
    },
    methods: {
      /**
       * 输入框内容发生变化时触发，已经做了防抖
       */
      onSearchChange(value) {
        this.searchWord = value
        if (!value) {
          return
        }
        this.$api
          .searchSuggest({
            data: {
              keywords: value,
              type: 'mobile',
            },
          })
          .then((data) => {
            this.suggestList = data.result.allMatch
          })
      },
      onFocus(value) {
        this.showSuggest = true
      },
      onBlur(value) {
        setTimeout(() => {
          this.showSuggest = false
        }, 100)
      },
      /**
       * 点击搜索结果
       */
      onClickSearch(word) {
        console.log(word)
        if (!word) {
          return
        }
        this.searchWord = word
        this.$refs.search.setWord(word)

        this.toSearch(word, this.swiperCurrent)
      },
      /**
       * 搜索
       * 搜索类型,默认为 1 即单曲 , 取值意义 :
       * 1: 单曲, 10: 专辑, 100: 歌手, 1000: 歌单,
       *  1002: 用户, 1004: MV, 1006: 歌词,
       *  1009: 电台, 1014: 视频, 1018:综合
       */
      toSearch(word, idx) {
        if (!word) {
          return
        }
        let index = idx
        //综合
        if (index === 0) {
          this.$refs.searchCom.doSearch(word)
        } else if (index == 1) {
          //单曲
          this.$refs.searchSong.doSearch(word)
        } else if (index == 2) {
          //歌单
          this.$refs.searchPayList.doSearch(word)
        } else if (index == 3) {
          //视频
          this.$refs.searchVideo.doSearch(word)
        }
      },
      // tabs通知swiper切换
      tabsChange(index) {
        console.log(index)
        this.swiperCurrent = index

        this.toSearch(this.searchWord, index)
      },
      // swiper-item左右移动，通知tabs的滑块跟随移动
      transition(e) {
        let dx = e.detail.dx
        this.$refs.uTabs.setDx(dx)
      },
      // 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
      // swiper滑动结束，分别设置tabs和swiper的状态
      animationfinish(e) {
        console.log('----animationfinish')
        let current = e.detail.current
        this.$refs.uTabs.setFinishCurrent(current)
        this.swiperCurrent = current
        if (this.currentTab !== current) {
          this.toSearch(this.searchWord, current)
        }
        this.currentTab = current
      },
      // scroll-view到底部加载更多
      onreachBottom() {
        console.log('active load more!')
      },
    },
  }
</script>

<style scoped>
  .search-result-page {
    position: absolute;
    top: 0;
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    flex-wrap: nowrap;
  }

  .tabs-wrapper {
    width: 100%;
  }

  /* m-swiper 切换 */
  .m-swiper {
    height: 0;
    flex: 1;
  }

  .swiper-item {
  }

  /* 搜索建议 */
  .search-suggest-box {
    position: absolute;
    top: 100rpx;
    left: 0;
    width: 100%;
    padding: 20rpx;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 10rpx;
  }

  .cell-group-box {
    width: auto;
    padding: 10rpx;
    margin: 0 20rpx;
    margin-top: 30rpx;
    background-color: #fff;
    border-radius: 30rpx;
    box-sizing: border-box;
  }
</style>
